import { View } from "@tarojs/components"
import Taro, { getCurrentInstance } from "@tarojs/taro"
import { useState } from "react"
import { AtButton, AtActionSheet, AtTextarea } from "taro-ui"
import CommentPanel from "../../../components/comment-panel"
import { commentPanelType } from "../../../components/comment-panel/types"
import ClothesCard from "../collection-card/index"
import Commits from "../comments"
import { collectionCardType } from "../type"
import './index.less'

function CollectionDetail() {
    const { router } = getCurrentInstance()
    const data: collectionCardType = JSON.parse(router?.params?.data ?? '') as unknown as collectionCardType

    const [isLike] = useState(data?.collection?.user?.isLike ?? false)
    const [isOpened, setIsOpened] = useState<boolean>(false)
    const [input, setInput] = useState<string>('')

    const panel: commentPanelType = [
        {
            key: 'share',
        },
        {
            key: 'menu',
            onClick: () => setIsOpened(!isOpened)
        },
        {
            key: 'heart',
            onClick: setCollection
        },
    ]

    function setCollection() {
        const { collection } = data
        isLike ? collection.content.like-- : collection.content.like++
        collection.user = { isLike: !isLike }
        Taro.eventCenter.trigger('setCollection', { id: collection.id, val: collection })
    }

    return <View className='collection-detail'>
        <ClothesCard collection={data.collection} height={data.height} showToolbar={false} clickDisabled />
        <CommentPanel collection={data.collection} panel={panel} fixed />
        <Commits />
        <AtActionSheet isOpened={isOpened} onClose={() => setIsOpened(false)}>
            <View className='at-row textarea'>
                <AtTextarea value={input} onChange={e => setInput(e)} />
                &nbsp;&nbsp;
                <AtButton type='primary'>发送</AtButton>
            </View>
        </AtActionSheet>
    </View >
}

export default CollectionDetail